<template>
    <el-dialog  title="最新采购"
               :visible.sync="dialogVisible" :modal-append-to-body="false" >
      <div class="mod-config" >
        <el-form :inline="true" :model="dataForm" ref="dataFormRef" @keyup.enter.native="getDataList()">
                    <el-form-item>
                        <el-input v-model="dataForm.yaoCaiMingCheng" placeholder="药材名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="dataForm.lianXiRen" placeholder="联系人" clearable></el-input>
                    </el-form-item>

            <el-form-item>
                <el-button @click="getDataList(1)">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                height="500"
                v-loading="dataListLoading"
                style="width: 100%;">
            <el-table-column
                    type="index"
                    label="序号"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
                    <el-table-column
                            prop="yaoCaiMingCheng"
                            header-align="center"
                            align="center"
                            label="药材名称">
                    </el-table-column>
                    <el-table-column
                            prop="xuQiuLiang"
                            header-align="center"
                            align="center"
                            label="需求量">
                    </el-table-column>
                    <el-table-column
                            prop="guiGe"
                            header-align="center"
                            align="center"
                            label="规格">
                    </el-table-column>
          <el-table-column
            prop="shiFouShangJia"
            header-align="center"
            align="center"
            label="上架状态">
          </el-table-column>
                    <el-table-column
                            prop="lianXiRen"
                            header-align="center"
                            align="center"
                            label="联系人">
                    </el-table-column>
                    <el-table-column
                            prop="lianXiDianHua"
                            header-align="center"
                            align="center"
                            label="联系电话">
                    </el-table-column>
                    <el-table-column
                            prop="yaoCaiChanDi"
                            header-align="center"
                            align="center"
                            label="药材产地">
                    </el-table-column>
                    <el-table-column
                            prop="jiaoHuoDiZhi"
                            header-align="center"
                            align="center"
                            label="交货地址">
                    </el-table-column>
                    <el-table-column
                            prop="faBuShiJian"
                            header-align="center"
                            align="center"
                            label="发布时间">
                    </el-table-column>
                    <el-table-column
                            prop="baoJiaRenShu"
                            header-align="center"
                            align="center"
                            label="报价人数">
                    </el-table-column>

<!--            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                               @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>

                </template>
            </el-table-column>-->
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qxzk()">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
    import ImgUpload from "../../components/upload/ImgUpload.vue";

    export default {
      components: {ImgUpload},
        data() {
            return {
              dialogVisible:false,
                dataForm: {
                                yaoCaiMingCheng:'',
                                xuQiuLiang:'',
                                guiGe:'',
                                zhuangTai:'',
                                lianXiRen:'',
                                lianXiDianHua:'',
                                yaoCaiChanDi:'',
                                jiaoHuoDiZhi:'',
                                faBuShiJian:'',
                                baoJiaRenShu:'',
                                qiYe:'',
                                ziZhiBiaoZhun:'',
                                zhiLiangBiaoZhun:'',
                                piaoJu:'',
                                fuKuanFangShi:'',
                                shiFouShangJia:'',
                                yaoCaiTuPian:'',
                                jiYang:'',
                                baoZhuang:'',
                                guanLianYongHu:'',
                },
                dataSaveForm: {
                                yaoCaiMingCheng:'',
                                xuQiuLiang:'',
                                guiGe:'',
                                zhuangTai:'',
                                lianXiRen:'',
                                lianXiDianHua:'',
                                yaoCaiChanDi:'',
                                jiaoHuoDiZhi:'',
                                faBuShiJian:'',
                                baoJiaRenShu:'',
                                qiYe:'',
                                ziZhiBiaoZhun:'',
                                zhiLiangBiaoZhun:'',
                                piaoJu:'',
                                fuKuanFangShi:'',
                                shiFouShangJia:'',
                                yaoCaiTuPian:'',
                                jiYang:'',
                                baoZhuang:'',
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,

                infoList:[],
                infoLoading: false,
                infoVisible: false,
              list1:[],
              isBoolean1: false,
              dianPuInfoVisible:false
            }
        },

        activated() {
            this.getDataList()
        },
        methods: {
          qxzk(){
            this.$nextTick(() => {
              this.$refs['dataFormRef'].resetFields()})
            this.dialogVisible=false

          },
          init(){
            this.dialogVisible=true
            this.$nextTick(() => {
              this.$refs['dataFormRef'].resetFields();
            });

            this.getDataList()
          },
          dianPuInfo(yonghuid) {
            this.dianPuInfoVisible = true;
            console.log(yonghuid)
            this.$nextTick(() => {
              this.$refs.dianpu.init(yonghuid)
            })
          },
            getDataList(pageIndex) {
                if (pageIndex) {
                    this.pageIndex = pageIndex
                }
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getCurrentCaiGou'),
                        method: 'get',
            params: this.$http.adornParams({
                'page': this.pageIndex,
                        'limit': this.pageSize,
                'yaoCaiMingCheng': this.dataForm.yaoCaiMingCheng,
                'xuQiuLiang': this.dataForm.xuQiuLiang,
                'guiGe': this.dataForm.guiGe,
                'zhuangTai': this.dataForm.zhuangTai,
                'lianXiRen': this.dataForm.lianXiRen,
                'lianXiDianHua': this.dataForm.lianXiDianHua,
                'yaoCaiChanDi': this.dataForm.yaoCaiChanDi,
                'jiaoHuoDiZhi': this.dataForm.jiaoHuoDiZhi,
                'faBuShiJian': this.dataForm.faBuShiJian,
                'baoJiaRenShu': this.dataForm.baoJiaRenShu,
                'qiYe': this.dataForm.qiYe,
                'ziZhiBiaoZhun': this.dataForm.ziZhiBiaoZhun,
                'zhiLiangBiaoZhun': this.dataForm.zhiLiangBiaoZhun,
                'piaoJu': this.dataForm.piaoJu,
                'fuKuanFangShi': this.dataForm.fuKuanFangShi,
                'shiFouShangJia': this.dataForm.shiFouShangJia,
                'yaoCaiTuPian': this.dataForm.yaoCaiTuPian,
                'jiYang': this.dataForm.jiYang,
                'baoZhuang': this.dataForm.baoZhuang,

            })
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.list
                        this.totalPage = Number(data.data.totalCount)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            qx() {
                this.addOrUpdateVisible = false;

            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true;
              this.list1=[];
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (id) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getById`),
                                method: 'get',
                                params: this.$http.adornParams({"id":id})
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.dataSaveForm.id = data.data.id
                                this.dataSaveForm.yaoCaiMingCheng = data.data.yaoCaiMingCheng;
                                this.dataSaveForm.xuQiuLiang = data.data.xuQiuLiang;
                                this.dataSaveForm.guiGe = data.data.guiGe;
                                this.dataSaveForm.zhuangTai = data.data.zhuangTai;
                                this.dataSaveForm.lianXiRen = data.data.lianXiRen;
                                this.dataSaveForm.lianXiDianHua = data.data.lianXiDianHua;
                                this.dataSaveForm.yaoCaiChanDi = data.data.yaoCaiChanDi;
                                this.dataSaveForm.jiaoHuoDiZhi = data.data.jiaoHuoDiZhi;
                                this.dataSaveForm.faBuShiJian = data.data.faBuShiJian;
                                this.dataSaveForm.baoJiaRenShu = data.data.baoJiaRenShu;
                                this.dataSaveForm.qiYe = data.data.qiYe;
                                this.dataSaveForm.ziZhiBiaoZhun = data.data.ziZhiBiaoZhun;
                                this.dataSaveForm.zhiLiangBiaoZhun = data.data.zhiLiangBiaoZhun;
                                this.dataSaveForm.piaoJu = data.data.piaoJu;
                                this.dataSaveForm.fuKuanFangShi = data.data.fuKuanFangShi;
                                this.dataSaveForm.shiFouShangJia = data.data.shiFouShangJia;
                                this.dataSaveForm.yaoCaiTuPian = data.data.yaoCaiTuPian;
                              if(data.data.yaoCaiTuPian){
                                this.list1=[];
                                this.list1.push({name: 'img', url: this.$http.adornUrl('/api-file/file/view/file?fileId=' + data.data.yaoCaiTuPian)})
                                this.isBoolean1 = true
                              }
                                this.dataSaveForm.jiYang = data.data.jiYang;
                                this.dataSaveForm.baoZhuang = data.data.baoZhuang;
                                this.dataSaveForm.guanLianYongHu = data.data.guanLianYongHu;
                            }
                        })
                    }
                })

            },
            qxinfo() {
                this.infoVisible = false;

            },
            // 新增 / 修改
            infoHandle(id) {
                this.infoVisible = true;
              this.$nextTick(() => {
                this.$refs.baoJ.init(id)
              })
                this.infoList=[];
                this.$http({
            url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/getById`),
                        method: 'get',
                        params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.infoList=data.data;
                    }
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定要进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/delByIds'),
                            method: 'post',
                            data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                        this.$message.error(data.msg)
                        }
                    })
                })
            },
            // 表单提交
            dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/caiGouGuanLi/caiGouGuanLiYaoCaiCaiGou/save`),
                                method: 'post',
                    data: this.$http.adornData({
                    'id': this.dataSaveForm.id || undefined,
                        'yaoCaiMingCheng': this.dataSaveForm.yaoCaiMingCheng,
                        'xuQiuLiang': this.dataSaveForm.xuQiuLiang,
                        'guiGe': this.dataSaveForm.guiGe,
                        'zhuangTai': this.dataSaveForm.zhuangTai,
                        'lianXiRen': this.dataSaveForm.lianXiRen,
                        'lianXiDianHua': this.dataSaveForm.lianXiDianHua,
                        'yaoCaiChanDi': this.dataSaveForm.yaoCaiChanDi,
                        'jiaoHuoDiZhi': this.dataSaveForm.jiaoHuoDiZhi,
                        'faBuShiJian': this.dataSaveForm.faBuShiJian,
                        'baoJiaRenShu': this.dataSaveForm.baoJiaRenShu,
                        'qiYe': this.dataSaveForm.qiYe,
                        'ziZhiBiaoZhun': this.dataSaveForm.ziZhiBiaoZhun,
                        'zhiLiangBiaoZhun': this.dataSaveForm.zhiLiangBiaoZhun,
                        'piaoJu': this.dataSaveForm.piaoJu,
                        'fuKuanFangShi': this.dataSaveForm.fuKuanFangShi,
                        'shiFouShangJia': this.dataSaveForm.shiFouShangJia,
                        'yaoCaiTuPian': this.dataSaveForm.yaoCaiTuPian,
                        'jiYang': this.dataSaveForm.jiYang,
                        'baoZhuang': this.dataSaveForm.baoZhuang,
                        'guanLianYongHu': this.dataSaveForm.guanLianYongHu,
                    })
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.addOrUpdateVisible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                            this.$message.error(data.msg)
                            }
                        })
                    }
                })


            },
        }
    }
</script>
<style>

.imgBox {
  border: 1px solid #ebeef5;
  border-left: none;
  width: 100%;
  height: 100%;
  position: relative;
  .devImg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: 12px 10px;
  }
}
.my-content{
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
//height: 100vh; /* 设置容器高度为视口高度 */
  align-items:center;text-align: center;
  font-weight:bold;font-size: 18px;

}
.custom-title{
  margin-bottom: 20px;
//margin-top: 20px;
}
.myLableClassName {
  color: rgb(19 35 29 / 77%);text-align:right;font-weight:bold;font-size: 16px;
}
</style>
